<template>
  <view class="category">
    <uni-search-bar
      placeholder="搜索商品"
      bgColor="#EEEEEE"
      cancelButton="none"
      radius="15"
      @click="nav(`/subpackage/goods/pages/search/index`)"
    />
    <view class="category-layout">
      <scroll-view scroll-y class="category-tabs" :show-scrollbar="false">
        <sp-tabs-pane
          paneKeyName="catId"
          titleName="catName"
          v-model="catId"
          :category="category"
          direction="vertical"
          :loading="loading"
          @change="handelTabsChange"
          v-if="category.length"
        ></sp-tabs-pane>
      </scroll-view>
      <view class="category-main">
        <u-tabs
          :current="current"
          :list="children"
          keyName="catName"
          lineColor="#FC3247"
          :activeStyle="{
            color: '#666666',
          }"
          @change="handelChildrenTabsChange"
          v-if="children.length"
        ></u-tabs>
        <scroll-view
          @refresherrefresh="onPullDownRefreshGoods"
          scroll-y
          class="category-goods"
          :show-scrollbar="false"
          @scrolltolower="scrolltolower"
          :refresher-enabled="true"
          :refresher-triggered="triggered"
        >
          <view class="cate-inner">
            <view class="goods-wrap">
              <sp-goods-card
                v-for="(goods, i) in goodsList"
                :key="goods.id"
                :goods="goods"
                type="row"
              ></sp-goods-card>
            </view>
            <view
              style="
                color: #666;
                font-size: 26rpx;
                text-align: center;
                padding: 20rpx 0;
              "
              v-if="goodsList.length > 0 && !isNext"
              >已经到底了~</view
            >
            <u-empty v-if="goodsList.length === 0" mode="data"> </u-empty>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { get, post } from "@/libs/request";
import { nav } from "@/libs/utils"
import { onShow, onPullDownRefresh} from "@dcloudio/uni-app";
const catId = ref<number>(0);
const current = ref<number>(0);
const category = ref<any[]>([]);
const children = ref<any[]>([]);
const pageIndex = ref<number>(1);
const pageSize = ref<number>(10);
// 是否还有下一页
const isNext = ref<boolean>(true);
const goodsList = ref<any[]>([]);
const triggered = ref<boolean>(false);
const loading = ref<boolean>(false);
/**
 * 获取分类列表
 */
const getTree = () => {
  get("goodsCategory/getTree").then((res) => {
    if (res.errCode == 0) {
      category.value = res.data;
      if (res.data.length) {
        handelTabsChange(0);
      }
    }
  });
};
/**
 * 点击一级分类
 */
const handelTabsChange = (i: number) => {
  if (catId.value == category.value[i].catId) return;
  current.value = 0;
  catId.value = category.value[i].catId;
  if (category.value[i].children.length) {
    children.value = [
      {
        catName: "全部",
        catId: category.value[i].catId,
      },
      ...category.value[i].children,
    ];
  }
  isNext.value = true;
  pageIndex.value = 1;
  goodsList.value = [];
  getGoodsPaginate(catId.value);
};
/**
 * 点击二级分类
 */
const handelChildrenTabsChange = (item: any) => {
  if (current.value == item.index) return;
  current.value = item.index;
  isNext.value = true;
  pageIndex.value = 1;
  goodsList.value = [];
  getGoodsPaginate(item.catId);
};
/**
 * 获取商品分页
 */
const getGoodsPaginate = (catId: number = 0) => {
  loading.value = true;
  post(
    "goods/paginate",
    {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
    },
    {
      catId: Number(catId),
    }
  ).then((res) => {
    loading.value = false;
    if (res.errCode == 0) {
      goodsList.value = goodsList.value.concat(res.data);
      pageIndex.value++;
      if (goodsList.value.length >= res.page.total) {
        isNext.value = false;
      }
    }
  });
};
// 滚动加载
const scrolltolower = () => {
  isNext.value && getGoodsPaginate();
};
/**
 * 重新加载
 */
const reload = async()=>{
  catId.value = 0;
  goodsList.value = [];
  pageIndex.value = 1;
  isNext.value = true;
  await getTree();
  await getGoodsPaginate();
}
/**
 * 拉下刷新商品
 */
const onPullDownRefreshGoods = (async()=>{
  triggered.value = true
  goodsList.value = [];
  pageIndex.value = 1;
  isNext.value = true;
  await getGoodsPaginate();
  triggered.value = false
})
onShow(async() => {
  await reload()
});
onPullDownRefresh(async()=>{
    await reload();
    uni.stopPullDownRefresh();
})
</script>
<style lang="less" scoped>
.category {
  height: 100vh;
  background: #f7f7f7;
  overflow: auto;
  &-tabs {
    width: 210rpx;
    background: #ffffff;
  }
  &-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: calc(100% - 115rpx);
    scroll-view {
      height: 100%;
    }
  }
  &-goods{
    height: 900rpx !important;
  }
  &-main {
    margin-left: 20rpx;
    width: calc(100% - 230rpx);
  }
  :deep(.uni-searchbar) {
    background: #ffffff;
  }
  .goods-wrap {
    :deep(.goods-card) {
      width: 510rpx;
      padding: 10rpx 0rpx 10rpx 10rpx;
      margin-bottom: 15rpx;
      border-radius: 15rpx;
      background: #ffffff;

      &-cover { 
        width: 180rpx;
        height: 180rpx;
        border-radius: 15rpx;

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 15rpx;
        }
      }

      &-info {
        width: 302rpx;

        .goods-name {
          height: 36rpx;
          font-size: 28rpx;
        }

        .goods-keys {
          font-size: 24rpx;
        }

        .goods-amount {
          font-size: 32rpx;
        }

        .goods-like {
          &-count {
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>
